html, body{
    height:100%;
    min-width: 400px;
    font-family: Arial;
}

body{
    background-image: linear-gradient(#e8546c, #de0124);
    background-repeat: no-repeat;
}

#wrapper{
    display: table;
    height: 100%;
    width: 100%;
}

#cell{
    display: table-cell; 
    vertical-align: middle;
}

#formDiv {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    
    padding: 50px;
    width: 400px;
    height: 380px;
    
    margin-left: auto;
    margin-right: auto;
    
    border-radius: 4px;
    background-color: white;
}

#formDiv > img{
    display: block;
    margin-bottom: 10px;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

#connectionForm > input{
    display: block;
    
    width: 100%;
    height: 35px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    
    font-size: 20px;
    
    border-radius: 2px;
    border: solid 1px #e5e5e5;
}

#connectionForm > p{
    color: #555555;
}

#connectionForm > input[type="submit"]{
    background-image: linear-gradient(#f75155, #f7282e);
    background-repeat: no-repeat;
    border: none;
    color: white;
    margin-bottom: 0px;
}

#connectionForm > input[type="submit"]:hover{
    box-shadow: 0 0 15px -1px rgba( 236, 19, 14, 0.7);
    box-shadow: 5px 7px 5px rgba( 255, 255, 255, 0.1) inset;
}

#connectionForm > input[type="submit"]:active{
    box-shadow: 1px 1px 10px rgba( 0, 0, 0, 0.7) inset;
}
#connect_errors{
    color:#f7282e !important;
}
.unselectable
{
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#loading{
    width:50px;
    height:50px;
}
#loading-indicator{
    width: 300px;
    margin-top: 10px;
    text-align: center;
}